<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻管理 - 百度新闻平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }
        
        /* 顶部导航样式 */
        .top-navbar {
            background-color: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 20px;
            font-weight: 600;
            color: #007bff;
        }
        
        .logout-btn {
            color: #666;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .logout-btn:hover {
            color: #007bff;
        }
        
        /* 主容器样式 */
        .container {
            margin-top: 30px;
        }
        
        /* 页面标题样式 */
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 30px;
        }
        
        /* 搜索筛选区域样式 */
        .search-filter {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 30px;
        }
        
        /* 表格样式 */
        .data-table {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .data-table table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .data-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #333;
        }
        
        .data-table tr:hover {
            background-color: #f8f9fa;
        }
        
        /* 按钮样式 */
        .btn {
            padding: 5px 12px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            padding: 15px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-wrap: wrap;
            gap: 5px;
        }
        
        .pagination a, .pagination span {
            display: inline-block;
            padding: 8px 12px;
            margin: 0 2px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .pagination a {
            background-color: #ffffff;
            color: #007bff;
            border: 1px solid #ddd;
        }
        
        .pagination a:hover {
            background-color: #007bff;
            color: #ffffff;
            border-color: #007bff;
        }
        
        .pagination .current {
            background-color: #007bff;
            color: #ffffff;
            border: 1px solid #007bff;
            font-weight: 600;
        }
        
        .pagination .disabled {
            background-color: #f8f9fa;
            color: #6c757d;
            border: 1px solid #ddd;
            cursor: not-allowed;
        }
        
        .pagination .info {
            margin-left: 20px;
            color: #6c757d;
            font-size: 14px;
            border: none;
            background-color: transparent;
            text-decoration: none;
            display: inline-block;
            margin-right: 5px;
        }
        
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #0056b3;
        }
        
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #c82333;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        
        .pagination a {
            color: #007bff;
            text-decoration: none;
            padding: 8px 16px;
            border: 1px solid #ddd;
            margin: 0 4px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        
        .pagination a:hover {
            background-color: #f8f9fa;
        }
        
        /* 图片预览样式 */
        .img-preview {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .top-navbar {
                padding: 10px;
            }
            
            .container {
                margin-top: 20px;
            }
            
            .search-filter,
            .data-table {
                padding: 15px;
            }
            
            .data-table th,
            .data-table td {
                padding: 8px;
                font-size: 14px;
            }
            
            .img-preview {
                width: 60px;
                height: 40px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-navbar">
        <div class="logo">百度新闻平台 - 管理系统</div>
        <div>
            <a href="/admin/logout" class="logout-btn">退出登录</a>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="container">
        <!-- 页面标题 -->
        <h1 class="page-title">新闻管理</h1>
        
        <!-- 搜索筛选区域 -->
        <div class="search-filter">
            <form method="GET" action="/admin">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="keyword">标题关键词</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" value="{{ keyword }}" placeholder="请输入关键词">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="start_date">开始日期</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ start_date }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="end_date">结束日期</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ end_date }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="app_id">应用ID</label>
                            <input type="text" class="form-control" id="app_id" name="app_id" value="{{ app_id }}" placeholder="请输入应用ID">
                        </div>
                    </div>
                </div>
                <!-- 在搜索筛选区域的按钮组中添加 -->
                <div class="row mt-3">
                    <div class="col-md-12 text-right">
                        <button type="submit" class="btn btn-primary">搜索</button>
                        <a href="/admin" class="btn btn-secondary">重置</a>
                        <a href="/admin/news/backup" class="btn btn-success">备份数据库</a>
                        <a href="/admin/news/structure" class="btn btn-info">编辑表结构</a>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- 数据表格 -->
        <div class="data-table">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>封面图片</th>
                        <th>媒体代码</th>
                        <th>排序号</th>
                        <th>发布时间</th>
                        <th>是否删除</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% if news_list %}
                        {% for news in news_list %}
                            <tr>
                                <td>{{ news[0] }}</td>
                                <td>
                                    {% if news[2] %}
                                        <img src="{{ news[2] }}" alt="封面" class="img-preview">
                                    {% else %}
                                        <span class="text-muted">无</span>
                                    {% endif %}
                                </td>
                                <td style="max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                    <a href="/news/{{ news[0] }}" target="_blank">{{ news[1] }}</a>
                                </td>
                                
                                <td>{{ news[5] or '' }}</td>
                                <td>{{ news[3] or 0 }}</td>
                                <td>{{ news[4] }}</td>
                                <td>{{ '是' if news[6] else '否' }}</td>
                                <td>
                                    <a href="/admin/news/edit/{{ news[0] }}" class="btn btn-primary">编辑</a>
                                    <button class="btn btn-danger delete-btn" data-id="{{ news[0] }}">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="7" class="text-center text-muted">暂无数据</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination">
            <!-- 上一页 -->
            {% if page > 1 %}
                <a href="?page={{ page-1 }}{% if keyword %}&keyword={{ keyword }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if app_id %}&app_id={{ app_id }}{% endif %}">上一页</a>
            {% else %}
                <span class="disabled">上一页</span>
            {% endif %}
            
            <!-- 页码导航 -->
            {% set start_page = [1, page-2] | max %}
            {% set end_page = [start_page+4, total_pages] | min %}
            
            {% if start_page > 1 %}
                <a href="?page=1{% if keyword %}&keyword={{ keyword }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if app_id %}&app_id={{ app_id }}{% endif %}">1</a>
                {% if start_page > 2 %}
                    <span>...</span>
                {% endif %}
            {% endif %}
            
            {% for p in range(start_page, end_page+1) %}
                {% if p == page %}
                    <span class="current">{{ p }}</span>
                {% else %}
                    <a href="?page={{ p }}{% if keyword %}&keyword={{ keyword }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if app_id %}&app_id={{ app_id }}{% endif %}">{{ p }}</a>
                {% endif %}
            {% endfor %}
            
            {% if end_page < total_pages %}
                {% if end_page < total_pages-1 %}
                    <span>...</span>
                {% endif %}
                <a href="?page={{ total_pages }}{% if keyword %}&keyword={{ keyword }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if app_id %}&app_id={{ app_id }}{% endif %}">{{ total_pages }}</a>
            {% endif %}
            
            <!-- 下一页 -->
            {% if page < total_pages %}
                <a href="?page={{ page+1 }}{% if keyword %}&keyword={{ keyword }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if app_id %}&app_id={{ app_id }}{% endif %}">下一页</a>
            {% else %}
                <span class="disabled">下一页</span>
            {% endif %}
            
            <!-- 分页信息 -->
            <span class="info">第 {{ page }}/{{ total_pages }} 页，共 {{ total_count }} 条记录</span>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后执行
        $(document).ready(function() {
            // 删除按钮点击事件
            $('.delete-btn').click(function() {
                const newsId = $(this).data('id');
                
                // 显示确认对话框
                if (confirm('确定要删除这条新闻吗？')) {
                    // 发送AJAX请求删除新闻
                    $.ajax({
                        url: '/admin/news/delete/' + newsId,
                        type: 'POST',
                        dataType: 'json',
                        success: function(response) {
                            if (response.success) {
                                // 删除成功，刷新页面或移除对应的行
                                alert('删除成功！');
                                window.location.reload();
                            } else {
                                // 删除失败，显示错误信息
                                alert('删除失败：' + response.message);
                            }
                        },
                        error: function() {
                            alert('网络错误，请稍后重试');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>